/*
 * @Author: your name
 * @Date: 2020-10-30 14:10:07
 * @LastEditTime: 2020-11-05 16:25:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /crowd-funding/src/components/pages/PriceChoose/index.js
 */
import React, { PureComponent } from 'react'
import './index.scss'
import { connect } from 'react-redux'
import { reportClick } from '@/utils/ping'
import { projectId } from '@/utils/constants'
import Exposure from '../../common/Exposure'

class PriceChoose extends PureComponent {
	showDialog = () => {
		// 弹窗档位选择框
		const { openDialog, homeData } = this.props
		const { storyPageData } = homeData
		const { projectStoryNewDto } = storyPageData // 获取初始化数据
		const { buttonStatus } = projectStoryNewDto
		reportClick({
			eventId: 'Mhelp_StoryDetail_GoSupport',
			eventParam: `${projectId}_${buttonStatus}`,
		})
		openDialog()
	}

	render() {
		const { homeData } = this.props
		const { storyPageData } = homeData
		const { supportRegion = [], supportRegionL = '零', projectStoryNewDto } = storyPageData // 获取初始化数据

		const { buttonStatus } = projectStoryNewDto
		//
		return supportRegion.length === 0 || buttonStatus === 3 || buttonStatus === 4 ? null : (
			<div className="price-choose-content">
				<Exposure floorName="priceChoose" />
				<p className="fourChoose">
					{`共${supportRegionL}挡可选 ,`}
					<span className="price-choose">
						{supportRegion.length === 1 && `￥${supportRegion[0]}`}
						{supportRegion.length > 1 &&
							`￥${supportRegion[0]}-￥${supportRegion[supportRegion.length - 1]}`}
					</span>
				</p>
				<div className="goChoosePrice" onClick={this.showDialog}>
					<span className="goPriceText">去支持</span>
					<div className="goChoosePriceImg" />
				</div>
			</div>
		)
	}
}

function dispatchToAction(dispatch) {
	return {
		openDialog() {
			dispatch({
				type: 'open:dialog',
				payload: {
					isOpen: true,
				},
			})
		},
	}
}

export default connect(({ homeData }) => ({ homeData }), dispatchToAction)(PriceChoose)
